來輕鬆聊聊

終於來到基礎CSS的最後一篇，這次要分享的是CSS的變量。
想像一個情境，你正在負責一個網頁的視覺設計，而你需要在許多地方用上同樣的顏色(如:暗紅色DarkRed)。通常在設定顏色時，都必須輸入正確的英文名稱/16進位數字/rgba，這並不是方便的做法，而且可能會忘記如何表示。
因此，CSS提供了一個方便的方法，可將常用的屬性值設定為自定義變量的值，需要使用時，在函數中放入變量名稱，即可得到設定的屬性值。這個做法不僅能避免開發中途忘記屬性值的名稱，若將變量名稱設定簡短一些，也能增進開發速度。

CSS變量

• 自定義一個CSS變量的格式為--變量名稱: 屬性值;。
• 使用變量的格式為屬性: var(--變量名稱);，亦即var(--變量名稱) = 屬性值。

範例

<!-- HTML -->
<p>我是酒紅色</p>

<div id="wine-box"></div>
<!-- CSS -->
:root {
  --title: 25px;
  --wine: #8b0000;
}
p {
  font-size: var(--title);
  color: var(--wine);
}
div {
  height: 100px;
  weight: 200px;
  background: var(--wine);
}

顯示效果如下

繼承、作用域、優先度

• HTML為巢狀結構，內層會繼承外層所定義的屬性值，包含變量。
• 通常會將變量定義在：root這個偽類別中。可以將其視為最外層、作用域最大，較不會受到影響。
• 變量和一般屬性值相同，也有優先順序的差別。

範例

<!-- HTML -->
<p>今天天氣很好</p>
<h3>明天不會下雨</h3>
<!-- CSS -->
:root {
  --color: blue;
}
p {
  --color: gray;
  color: var(--color);
}
h3 {
  color: var(--color);
}

顯示效果如下

默認值、兼容性

• 使用變量時，若不確定是否有定義變量或變量可能意外有誤時，可以在後方加上一個默認值，避免出錯，例：var(--SB, skyblue)。
• 由於瀏覽器種類眾多，不同裝置的瀏覽器版本又可能有所不同，為避免不支援CSS變量，可以在使用變量的前方加上原有的屬性值，增加兼容性。

範例

:root {
  --title: darkgray;
}
h1 {
  color: darkgray; // 兼容性
  color: var(--title, darkgray); // 逗號後方為默認值
}

基礎的部分到今天分享完畢，接下來有更進階的內容，有任何問題也歡迎在下方與大家分享討論哦！

內容來源：
freeCodeCamp|CodePen